<template>
	<div class="indexCount">
		<header class="outer clearfix">
			<ul class="cl">
				<span class="span font-b" v-if="this.$store.state.token">NETSS</span>
				<li @click="onchange(item,index)" class="cursor-p" v-for="(item,index) in navigateList" :key="index"
					:class="{change:index==backcolor}">{{item.title}}</li>
			</ul>
			<div class="cr admin"><a-dropdown>
					<a class="ant-dropdown-link" @click.prevent>
						{{this.$store.state.username}}
						<DownOutlined />
					</a>
					<template #overlay>
						<a-menu>
							<a-menu-item>
								<a href="javascript:;">个人信息</a>
							</a-menu-item>
							<a-menu-item @click="dataChange">修改密码</a-menu-item>
							<a-menu-item @click="outLogin">
								<span class="loginOuter">退出</span>
							</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown></div>
		</header>

		<!--弹出框-->
		<!--弹出禁用-->
		<a-drawer title="修改密码" placement="right" :closable="false" :visible="timeJing" @close="onClose" :width="500">
			<div class="stopButton">
				<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal">
					<a-form-item label="原密码">
						<a-input-password v-model:value="formState.password" />
					</a-form-item>
					<a-form-item label="新密码">
						<a-input-password v-model:value="formState.newPassword" />
					</a-form-item>
					<a-form-item label="确认密码">
						<a-input-password v-model:value="formState.rPassword" />
					</a-form-item>
					<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
						<a-button type="primary" @click="sureChange">确认修改</a-button>
						<a-button class="m-l-10" @click="onClose">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</a-drawer>
		<!--子目录以及内容-->
		<footer>
			<a-layout>
				<a-layout-sider :trigger="null" collapsible>
					<a-menu v-for="(item,index) in navigateList[number].navigateChileList"
						v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
						<a-menu-item @click="childrens(item.url)" :key="String(index)">
							<span>{{item.name}}</span>
						</a-menu-item>
					</a-menu>
				</a-layout-sider>
				<a-layout>
					<!--内容-->
					<a-layout-content
						:style="{ margin: '16px 16px 0px 16px', padding: '16px 16px 0px 16px', minHeight: '280px' }">
						<div class="aa bc-white padding-30" :style="{height:(windowHeight - 119) + 'px'}"
							style="min-height: calc(100vh - 120);">
							<router-view></router-view>
						</div>
					</a-layout-content>
				</a-layout>
			</a-layout>
		</footer>
	</div>
</template>
<script>
	import apiUser from '../api/user.js'
	import {
		Modal
	} from 'ant-design-vue';
	import md5 from 'md5'
	import {
		DownOutlined,
		MenuUnfoldOutlined,
		MenuFoldOutlined,
	} from '@ant-design/icons-vue';
	import storeage from '../storage/index.js'
	export default {
		data() {
			return {
				windowHeight: document.documentElement.clientHeight,
				// windowHeight: '',
				backcolor: 3,
				number: 3,
				opo: false,
				/*弹出框*/
				timeJing: false,
				num: 0,
				navigateList: [{
						title: "首页",
						tab: "index",
						navigateChileList: [{
							name: "首页",
							url: "/index/index"
						}, ]
					},

					{
						title: "资源管理",
						tab: "resources",
						navigateChileList: [{
								name: "所有资源",
								url: "/resources/allResources"
							},
							{
								name: "分类管理",
								url: "/resources/classResources"
							},
							{
								name: "订单管理",
								url: "/resources/orderManage"
							},
							{
								name: "下载记录",
								url: "/resources/downLoadeManage"
							},
						]
					},
					{
						title: "课程管理",
						tab: "kecheng",
						navigateChileList: [{
								name: "课程列表",
								url: "/kecheng/list"
							},
							{
								name: "课程订单",
								url: "/kecheng/order"
							}
						]
					},
					{
						title: "用户管理",
						tab: "user",
						navigateChileList: [{
								name: "所有用户",
								url: '/user/member'
							},
							{
								name: "创作申请者",
								url: '/user/createRequest'
							},
							{
								name: "VIP订单",
								url: '/user/vipOrder'
							},
							{
								name: "用户反馈",
								url: '/user/feedback'
							},
						]
					},
					{
						title: "提现管理",
						tab: "tixian",
						navigateChileList: [{
							name: "提现记录",
							url: "/tixian/tiXian"
						}, ]
					},
					{
						title: "文章管理",
						tab: "article",
						navigateChileList: [{
								name: "文章列表",
								url: "/article/articleContent"
							},
							{
								name: "文章分类",
								url: "/article/articleClassify"
							},
						]
					},
					{
						title: "统计",
						tab: "statistatis",
						navigateChileList: [
							{
								name: "错误日志",
								url: '/statistatis/errorMog'
							},
							{
								name: "用户登录日志",
								url: '/statistatis/user-log'
							},
							{
								name: "短信验证码",
								url: '/statistatis/smsCode'
							}
						]
					},
					{title:"系统设置",
						tab:"system",
						navigateChileList:[
							{name:"基础配置",url:'/system/basics'},
							{name:"支付设置",url:'/system/pay'},
							{name:"首页Nav",url:'/system/indexNav'},
							{name:"标签管理",url:'/system/label'},
							{name:"广告管理",url:'/system/advertisementSpaceList'},
							{name:"短信接口",url:'/system/sms'},
							{name:"会员设置",url:'/system/vip'},
							{name:"系统设置",url:'/system/config'},
						]
					},
					{
						title: "数据同步",
						tab: "tongbu",
						navigateChileList: [
							{
								name: "资源同步",
								url: '/tongbu/ziyuan'
							},
							{
								name: "同步配置",
								url: '/tongbu/config'
							}
						]
					},
					{
						title: "系统更新",
						tab: "update",
						navigateChileList: [
							{
								name: "系统更新",
								url: '/update/update'
							}
						]
					},
				],
				actionUrl: '',
				selectedKeys: [''],
				formState: {
					password: '', // 原密码
					newPassword: '', // 新密码
					rPassword: '', // 重复密码
					login_name: ''
				},
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 10
				},
			};
		},
		components: {
			DownOutlined,
			MenuUnfoldOutlined,
			MenuFoldOutlined,
		},
		mounted() {
			if (!this.$store.state.token) {
				this.$router.push({
					path: '/index/index'
				})
			}
			this.getUrl();
		},
		methods: {
			getUrl() {
				let url = window.location.pathname; /* 获取文件路径（文件地址） */
				if (url == '/') {
					this.$router.push({
						path: '/index/index'
					})
				}
				this.actionUrl = url
				let urls = url.split('/')
				for (let i = 0; i < this.navigateList.length; i++) {
					if (this.navigateList[i].tab === urls[1]) {
						this.backcolor = i
						this.number = i
					}
				}
				let navigateChileList = this.navigateList[this.number].navigateChileList
				for (let i = 0; i < navigateChileList.length; i++) {
					if (url == navigateChileList[i].url) {
						this.selectedKeys = ['' + i]
					}
				}
			},

			onchange(item, index) {
				this.backcolor = index;
				this.number = index;
				this.$router.push(item.navigateChileList[0].url)
				this.selectedKeys = ['0']
			},
			/*点击修改密码*/
			dataChange() {
				this.timeJing = true;
			},
			onClose() {
				this.timeJing = false;
			},
			/*确认修改密码*/
			sureChange() {
				if (this.formState.password == '' || this.formState.newPassword == '' || this.formState.rPassword == '') {
					this.$message.error("请输入原始密码")
				} else {
					this.formState.password = md5(this.formState.password);
					this.formState.newPassword = md5(this.formState.newPassword);
					this.formState.rPassword = md5(this.formState.rPassword);
					apiUser.editPassword(this.formState).then(res => {
						this.formState = {
							password: '',
							newPassword: '',
							rPassword: '',
							login_name: ''
						}
						if (res.status == 1) {
							this.timeJing = false;
							this.$message.success("修改成功")
						}
					})
				}
			},
			childrens(e) {
				this.$router.push(e);
			},
			onClick({
				key
			}) {
				console.log(`Click on item ${key}`);
			},
			/*点击退出登录*/
			outLogin() {
				let that = this
				Modal.confirm({
					title: () => '确定退出账号吗?',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						that.outLoginEvent()
					},
				})
			},

			// 退出登录
			outLoginEvent() {
				apiUser.loginOut().then(res => {
					if (res.status == 1) {
						this.$store.commit('saveUser', null)
						this.$store.commit('saveToken', null)
						this.$store.commit('saveUserName', null)
						this.$router.push({
							path: '/login'
						})
					}
				})
			}
		},
	};
</script>

<style scoped>
	/*退出登录*/
	.loginOuter {
		display: inline-block;
		width: 100%;
	}

	/*头部菜单*/
	.outer {
		background-color: #393D49;
		padding: 5px;

	}

	.aa {
		overflow-y: auto;
		/*background-color: #2ea589;*/
	}

	.outer ul {

		display: flex;
		justify-content: space-between;
	}

	.outer ul .span {
		display: inline-block;
		font-size: 30px;
		margin-right: 20px;
		color: #6C9FC1;
	}

	.outer ul .span:hover {
		color: #585858;
	}

	.icon-kejian {
		background-color: red !important;
	}

	.outer ul li {
		list-style: none;
		padding: 20px;
		color: #B6B8AC;
	}

	.outer ul li:hover {
		color: white;
	}

	/*鼠标移入改变标题颜色*/
	.change {
		color: white !important;
	}

	/*菜单子目录类容*/
	#components-layout-demo-custom-trigger .trigger {
		font-size: 18px;
		/*line-height: 64px;*/
		padding: 0 24px;
		cursor: pointer;
		transition: color 0.3s;
	}

	#components-layout-demo-custom-trigger .trigger:hover {
		color: #1890ff;
	}

	.site-layout .site-layout-background {
		background: #fff;
	}

	.ant-layout-header {
		height: 0px;
		padding: 0 50px;
		color: rgba(0, 0, 0, 0.85);
		line-height: 0px;
		background: #001529;
	}

	:deep(.ant-layout) {
		display: flex;
		flex: auto;
		flex-direction: column;
		min-height: 0;
		background: white;
	}

	:deep(.ant-layout.ant-layout-has-sider > .ant-layout, .ant-layout.ant-layout-has-sider > .ant-layout-content) {
		width: 0;
		background: #F5F5F5;
	}
</style>